<template>
  <div class="main" style="">
    <!--<h2 style="padding-left: 50px">订单信息：</h2>-->
    <div style="margin: 10px 0 10px 0px">
      <el-input v-model="searchName" placeholder=" 请 输 入 关 键 字 " style="width:30%"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="orderAllList">查询</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 1250px;">
      <el-table-column align="center" prop="memberId" label="用户id"></el-table-column>
      <el-table-column align="center" prop="id" label="订单号"></el-table-column>
      <el-table-column align="center" sortable prop="datetime" label="日期"></el-table-column>
      <el-table-column align="center" prop="price" label="价格"></el-table-column>
      <el-table-column align="center" prop="status" label="状态" :formatter="orderStatus"></el-table-column>
      <el-table-column align="center" fixed="right" label="操作" style="width: 200px">
        <template #default="scope">
          <el-button  @click="handleEdit(scope.row.id)" type="primary">详情</el-button>
          <el-popconfirm title="你确定要删除该数据吗？" @confirm="delOrder(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column align="center" label="" style="width: 200px">
        <template #default="scope">
          <el-button v-if="scope.row.status === 3" disabled  @click="statusValue(3, scope.row.id)" type="success">发货</el-button>
          <el-button v-else  @click="statusValue(3, scope.row.id)" type="success">发货</el-button>
          <el-button v-if="scope.row.status === 2" disabled @click="statusValue(2, scope.row.id)" type="warning">未发货</el-button>
          <el-button v-else @click="statusValue(2, scope.row.id)" type="warning">未发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-left: 25%;padding-top: 10px;tab-size: 16px">
      <el-pagination
          small
          background
          layout="prev, pager, next, sizes, total, jumper"
          class="mt-4"
          @size-change="pageSizeChange"
          @current-change="currentChange"
          :total="total"
          :current-page="currentPage"
          :page-sizes="[10,20]"
          :page-size="pageSize"
      />
    </div>

  </div>
  <el-dialog v-model="dialogTableVisible" title="订单详情">
    <el-table :data="gridData">
      <el-table-column align="center" property="name" label="商品名" style="width: 80%"/>
      <el-table-column align="center" property="price" label="单价" style="width: 80%"/>
      <el-table-column align="center" property="count" label="数量" style="width: 80%"/>
      <el-table-column align="center" property="totalPrice" label="总价" style="width: 80%"/>
    </el-table>
  </el-dialog>
</template>

<script>
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

export default {
  name: "order",
  dialogTableVisible: false,
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      total: 5,
      dialogTableVisible: false,
      searchName: '',
      hireType: [
        {
          id: 0,
          value: '未付款'
        },
        {
          id: 1,
          value: '已付款'
        },
        {
          id: 2,
          value: '未发货'
        },
        {
          id: 3,
          value: '已发货'
        },
      ],
      gridData: [{
        name: 'iphone',
        price: 122,
        count: 2,
        totalPrice: 244
      },
        {
          name: 'iphone',
          price: 122,
          count: 2,
          totalPrice: 244
        }
      ],
      tableData: [{
        datetime: '2016-05-02',
        id: '王小虎',
        price: 123,
        status: '已付款',
        memberId: 2
      },
        {
          datetime: '2016-05-02',
          id: '王小虎',
          price: 132,
          status: '已发货',
          memberId: 2
        }]
    }
  },
  created() {
    this.orderAllList();
  },
  methods: {
    currentChange(pageNum) {
      this.currentPage = pageNum;
      this.orderAllList();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.orderAllList();
    },
    statusValue(value, id){
      // console.log("id=", id);
      // console.log("value=", value);
      request.get("/api/changeStatus", {
        params: {
          orderId: id,
          status: value
        }
      }).then(
          res => {
            if (res.code === '200'){
              ElMessage({
                message: res.msg,
                type: 'success',
              })
            }
            if (res.code === '555'){
              ElMessage({
                message: "更新状态失败",
                type: 'error',
              })
            }
            this.orderAllList();
          }
      )
    },
    orderAllList(){
      request.get("/api/orderAllList", {
        params: {
          searchName: this.searchName,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(
          res => {
            if (res.code === '200'){
              this.tableData = res.data.records;
              this.total = res.data.total;
            }
            if (res.code === '010'){
              ElMessage({
                message: res.msg,
                type: 'warning',
              })
            }
          }
      )
    },
    handleEdit(orderId){
      this.dialogTableVisible = true;
      request.post("/api/orderItemList/" + orderId).then(
          res => {
            if (res.code === '200'){
              this.gridData = res.data;
            }
          }
      )
    },
    orderStatus(row, column, cellValue){
      const obj = this.hireType.find(item => item.id === cellValue);
      return obj ? obj.value : '你猜';
    },
    delOrder(id){
      console.log("id=", id);
      request.delete("/api/delOrder/" + id).then(
          res => {
            if (res.code === '200'){
              ElMessage({
                message: res.msg,
                type: 'success',
              })
            }
            if (res.code === '555'){
              ElMessage({
                message: "操作失败",
                type: 'error',
              })
            }
            this.orderAllList();
          }
      )
    }
  }
}
</script>

<style scoped>

</style>